<template>
  <div class="m-tools">
    <van-grid :column-num="3" :border="false" clickable>
      <van-grid-item
        :text="item.name"
        v-for="item in tools"
        @click="onToolClick(item.id)"
      >
        <template #icon>
          <img :src="item.icon" style="width: 36px" alt="" />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script setup lang="ts">
import polygonSvg from "@/assets/icons/polygon.svg";
import { eventBus } from "@/event.ts";

const tools = [
  {
    name: "多边形",
    icon: polygonSvg,
    id: "Polygon",
  },
];

function onToolClick(tool: string) {
  eventBus.emit("beginDraw", tool);
}
</script>

<style scoped lang="less">
.m-tools {
  padding: 10px;
}
</style>
